$paginator-background-color: var(--rz-base-background-color) !default;
$paginator-padding: 0.5rem !default;
$paginator-border: $grid-border !default;

$paginator-button-border-radius: var(--rz-border-radius) !default;

$paginator-numeric-button-background-color: var(--rz-base-200) !default;
$paginator-numeric-button-color: var(--rz-text-color) !default;
$paginator-numeric-button-border: 1px solid transparent !default;
$paginator-numeric-button-hover-background-color: $paginator-numeric-button-background-color !default;
$paginator-numeric-button-hover-color: $paginator-numeric-button-color !default;
$paginator-numeric-button-margin: 0 0.25rem !default;
$paginator-numeric-button-padding: 0.4375rem !default;
$paginator-numeric-button-selected-background-color: var(--rz-base-background-color) !default;
$paginator-numeric-button-selected-color: var(--rz-primary) !default;
$paginator-numeric-button-selected-border: var(--rz-border-base-200) !default;
$paginator-numeric-button-selected-padding: $paginator-numeric-button-padding; // Selected button padding should be the same as the default one
$paginator-numeric-button-min-width: 2.25rem !default;

$paginator-back-button-background-color: var(--rz-base-200) !default;
$paginator-back-button-color: var(--rz-text-color) !default;
$paginator-back-button-hover-background-color: $paginator-back-button-background-color !default;
$paginator-back-button-hover-color: $paginator-back-button-color !default;

$paginator-first-button-margin: 0 0.5rem 0 0 !default;
$paginator-last-button-margin: 0 0 0 0.5rem !default;

$paginator-next-button-background-color: var(--rz-base-200) !default;
$paginator-next-button-color: var(--rz-text-color) !default;
$paginator-next-button-hover-background-color: $paginator-next-button-background-color !default;
$paginator-next-button-hover-color: $paginator-next-button-color !default;

$paginator-dropdown-width: 80px !default;
$paginator-dropdown-margin: $paginator-last-button-margin !default;

$paginator-summary-padding: 0 1.25rem 0 0 !default;
$paginator-summary-font-size: var(--rz-body-font-size) !default;
$paginator-summary-color: var(--rz-text-secondary-color) !default;

$paginator-button-size: "%button-md" !default;

// Pager CSS variables

:root {
  --rz-paginator-background-color: #{$paginator-background-color};
  --rz-paginator-padding: #{$paginator-padding};
  --rz-paginator-border: #{$paginator-border};

  --rz-paginator-button-border-radius: #{$paginator-button-border-radius};

  --rz-paginator-numeric-button-background-color: #{$paginator-numeric-button-background-color};
  --rz-paginator-numeric-button-color: #{$paginator-numeric-button-color};
  --rz-paginator-numeric-button-border: #{$paginator-numeric-button-border};
  --rz-paginator-numeric-button-hover-background-color: #{$paginator-numeric-button-hover-background-color};
  --rz-paginator-numeric-button-hover-color: #{$paginator-numeric-button-hover-color};
  --rz-paginator-numeric-button-margin: #{$paginator-numeric-button-margin};
  --rz-paginator-numeric-button-padding: #{$paginator-numeric-button-padding};
  --rz-paginator-numeric-button-selected-background-color: #{$paginator-numeric-button-selected-background-color};
  --rz-paginator-numeric-button-selected-color: #{$paginator-numeric-button-selected-color};
  --rz-paginator-numeric-button-selected-border: #{$paginator-numeric-button-selected-border};
  --rz-paginator-numeric-button-selected-padding: #{$paginator-numeric-button-selected-padding};
  --rz-paginator-numeric-button-min-width: #{$paginator-numeric-button-min-width};

  --rz-paginator-back-button-background-color: #{$paginator-back-button-background-color};
  --rz-paginator-back-button-color: #{$paginator-back-button-color};
  --rz-paginator-back-button-hover-background-color: #{$paginator-back-button-hover-background-color};
  --rz-paginator-back-button-hover-color: #{$paginator-back-button-hover-color};

  --rz-paginator-first-button-margin: #{$paginator-first-button-margin};
  --rz-paginator-last-button-margin: #{$paginator-last-button-margin};

  --rz-paginator-next-button-background-color: #{$paginator-next-button-background-color};
  --rz-paginator-next-button-color: #{$paginator-next-button-color};
  --rz-paginator-next-button-hover-background-color: #{$paginator-next-button-hover-background-color};
  --rz-paginator-next-button-hover-color: #{$paginator-next-button-hover-color};

  --rz-paginator-dropdown-width: #{$paginator-dropdown-width};
  --rz-paginator-dropdown-margin: #{$paginator-dropdown-margin};

  --rz-paginator-summary-padding: #{$paginator-summary-padding};
  --rz-paginator-summary-font-size: #{$paginator-summary-font-size};
  --rz-paginator-summary-color: #{$paginator-summary-color};
}

.rz-paginator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  &.rz-align-right {
    justify-content: flex-end;
  }

  &.rz-align-left {
    justify-content: flex-start;
  }

  &.rz-align-center {
    justify-content: center;
  }

  background-color: var(--rz-paginator-background-color);
  padding: var(--rz-paginator-padding);

  .rzi-step-backward {
    &:before {
      content: 'first_page';
    }
  }

  .rzi-caret-left {
    &:before {
      content: 'navigate_before';
    }
  }

  .rzi-caret-right {
    &:before {
      content: 'navigate_next';
    }
  }

  .rzi-step-forward {
    &:before {
      content: 'last_page';
    }
  }

  .rz-dropdown {
    order: 2;
    width: var(--rz-paginator-dropdown-width);
    margin-left: 1rem;
    overflow: visible;
  }

  .rz-pagesize-text {
    order: 2;
    margin: var(--rz-paginator-last-button-margin);
    font-size: var(--rz-paginator-summary-font-size);
    color: var(--rz-paginator-summary-color);
  }

  .rz-dropdown-items-wrapper {
    width: var(--rz-paginator-dropdown-width - 4px);
  }
}

.rz-paginator-element,
.rz-paginator-page {
  &:hover {
    background-color: var(--rz-paginator-numeric-button-hover-background-color);
    color: var(--rz-paginator-numeric-button-hover-color);
  }
}

.rz-paginator-bottom {
  border-top: var(--rz-paginator-border);
}

.rz-paginator-pages {
  display: inline-flex;
  margin: 0 0.5rem;
}

.rz-paginator-element {
  @extend %button, #{$paginator-button-size}, .rz-button-icon-only;
  letter-spacing: 0;
}

.rz-paginator-first {
  margin: var(--rz-paginator-first-button-margin);

  .rz-align-center & {
    margin-left: auto;
  }
}

.rz-paginator-prev {
  margin-right: auto;

  .rz-align-left &,
  .rz-align-right &,
  .rz-align-center & {
    margin: var(--rz-paginator-first-button-margin);
  }
}

.rz-paginator-next {
  margin-left: auto;

  .rz-align-left &,
  .rz-align-right &,
  .rz-align-center & {
    margin: var(--rz-paginator-last-button-margin);
  }
}

.rz-paginator-last {
  margin: var(--rz-paginator-last-button-margin);

  .rz-align-center & {
    margin-right: auto;
  }
}

.rz-paginator-first,
.rz-paginator-prev {
  background-color: var(--rz-paginator-back-button-background-color);
  color: var(--rz-paginator-back-button-color);
  border-radius: var(--rz-paginator-button-border-radius);
}

.rz-paginator-element {
  &:hover {
    text-decoration: none;
  }
}

.rz-paginator-last,
.rz-paginator-next {
  background-color: var(--rz-paginator-next-button-background-color);
  color: var(--rz-paginator-next-button-color);
  border-radius: var(--rz-paginator-button-border-radius);
}

.rz-paginator-page {
  display: inline-block;
  min-width: var(--rz-paginator-numeric-button-min-width);
  text-align: center;
  margin: var(--rz-paginator-numeric-button-margin);
  background-color: var(--rz-paginator-numeric-button-background-color);
  border: var(--rz-paginator-numeric-button-border);
  border-radius: var(--rz-paginator-button-border-radius);
  padding: var(--rz-paginator-numeric-button-padding);
  color: var(--rz-paginator-numeric-button-color);

  &.rz-state-active {
    background-color: var(--rz-paginator-numeric-button-selected-background-color);
    color: var(--rz-paginator-numeric-button-selected-color);
    border: var(--rz-paginator-numeric-button-selected-border);
    padding: var(--rz-paginator-numeric-button-selected-padding);
  }
}

.rz-paginator-summary {
    padding: var(--rz-paginator-summary-padding);
    font-size: var(--rz-paginator-summary-font-size);
    color: var(--rz-paginator-summary-color);

    .rz-align-right & {
      margin-right: auto;
    }

    .rz-align-left & {
      order: 2;
      margin-left: auto;
      padding: 0;
    }
}

@media (max-width: 768px) {
    .rz-paginator-page {
        &:not(.rz-state-active) {
            display: none;
        }
    }

    .rz-paginator {
        display: grid;
        grid-column-gap: 0.5rem;
        grid-row-gap: 1rem;
        grid-template-columns: repeat(9, 1fr);
        text-align: center;

        .rz-dropdown {
            grid-column: 1/4;
            width: auto;
            margin: 0 !important;
            text-align: left;
        }

        .rz-pagesize-text {
            grid-column: 4/10;
            margin: 0 !important;
            text-align: left;
        }
    }

    .rz-paginator-summary {
        grid-column: 1/10;
        padding: 0 !important;
        text-align: left;
    }

    .rz-paginator-first {
        grid-column: 1/3;
        margin: 0 !important;
    }

    .rz-paginator-prev {
        grid-column: 3/5;
        margin: 0 !important;
    }

    .rz-paginator-pages {
        grid-column: 5/6;
        margin: 0 !important;
    }

    .rz-paginator-next {
        grid-column: 6/8;
        margin: 0 !important;
    }

    .rz-paginator-last {
        grid-column: 8/10;
        margin: 0 !important;
    }
}

@container rz-lookup-panel (max-width: 768px) {
  .rz-paginator-page {
    &:not(.rz-state-active) {
      display: none;
    }
  }

  .rz-paginator {
    display: grid;
    grid-column-gap: 0.5rem;
    grid-row-gap: 1rem;
    grid-template-columns: repeat(9, 1fr);
    text-align: center;

    .rz-dropdown {
      grid-column: 1/4;
      width: auto;
      margin: 0 !important;
      text-align: left;
    }
    .rz-pagesize-text {
      grid-column: 4/10;
      margin: 0 !important;
      text-align: left;
    } 
  }

  .rz-paginator-summary {
    grid-column: 1/10;
    padding: 0 !important;
    text-align: left;
  }

  .rz-paginator-first {
    grid-column: 1/3;
    margin: 0 !important;
  }

  .rz-paginator-prev {
    grid-column: 3/5;
    margin: 0 !important;
  }

  .rz-paginator-pages {
    grid-column: 5/6;
    margin: 0 !important;
  }

  .rz-paginator-next {
    grid-column: 6/8;
    margin: 0 !important;
  }

  .rz-paginator-last {
    grid-column: 8/10;
    margin: 0 !important;
  }
}

// Density
.rz-paginator {
  &.rz-density-compact {
    --rz-paginator-padding: 0.25rem;
    --rz-paginator-numeric-button-margin: 0 0.125rem;
    --rz-paginator-first-button-margin: 0 0.25rem 0 0;
    --rz-paginator-last-button-margin: 0 0 0 0.25rem;
    --rz-paginator-dropdown-margin: 0 0 0 0.25rem;
    --rz-paginator-summary-padding: 0 0.5rem 0 0;

    .rz-paginator-element {
      @extend %button-sm;
    }
  }
}
